<!--
 * @Author: Ryan
 * @Date: 2022-12-09 18:42:01
 * @LastEditors: Ryan
 * @LastEditTime: 2022-12-12 11:45:08
 * @Description: 开发指南-页面模板
 * @FilePath: \yr-admin-system-framework\src\views\develop\demo\template\index.vue
-->

<template>
  <div class="app-container">
    <div class="block">
      <demo-query />
      <el-divider />
    </div>

    <div class="block">
      <h2>页面模板由视图和逻辑两部分组成</h2>
      <h4>{{ viewText }}</h4>
      <p>
        template标签包裹下的内容为视图部分，负责页面内容的排版布局和样式渲染
      </p>
      <h4>{{ codeText }}</h4>
      <p>
        script标签包裹下的内容为逻辑部分，负责处理代码逻辑
      </p>
      <code-editor
        :value="codeValue"
        :display_language="false"
        font_size="14px"
        width="100%"
      />
    </div>
  </div>
</template>

<script>
import CodeEditor from 'simple-code-editor'
import DemoQuery from '../query/index.vue'

export default {
  name: 'DevelopTemplate',
  components: { CodeEditor, DemoQuery },
  data() {
    return {
      viewText: '视图-<template>',
      codeText: '逻辑-<script>',
      codeValue: `
<template>
  <div class="app-container">
    <!-- 筛选栏 -->
    <div class="filter-container">
      <!-- 筛选字段 -->

      <!-- 按钮 -->
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-show="showCreateBtn"
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
    </div>

    <!-- 数据Table -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- 表格字段 -->

      <el-table-column
        v-if="showBtns"
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <!-- 编辑 -->
          <el-button v-show="showUpdateBtn" type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <!-- 详情 -->
          <el-button v-show="showInfoBtn" size="mini" @click="handleInfo(row)">
            详情
          </el-button>
          <!-- 删除 -->
          <el-button
            v-show="showDeleteBtn"
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页栏 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 编辑弹窗 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px"
        :disabled="showInfo"
      >
        <!-- 编辑内容 -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="!showInfo" @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button
          v-show="!showInfo"
          type="primary"
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >
          确认
        </el-button>
        <el-button v-show="showInfo" type="primary" @click="dialogFormVisible = false"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 分页组件
import Pagination from '@/components/Pagination'
// API接口函数
import { fetchList, createList, updateList, deleteList } from '@/api/example'

export default {
  // 页面组件名称
  name: 'Example',
  components: { Pagination },
  data() {
    return {
      // 显示添加按钮
      showCreateBtn: false,
      // 显示编辑按钮
      showUpdateBtn: false,
      // 显示删除按钮
      showDeleteBtn: false,
      // 显示详情按钮
      showInfoBtn: true,
      // 表格数据
      list: null,
      // 数据总数
      total: 0,
      // 表格加载中
      listLoading: false,
      listQuery: {
        // 当前页码
        page: 1,
        // 数据条数
        limit: 20,
        // ----------添加筛选栏字段----------

      },
      // ----------定义筛选栏下拉框字段数据源----------

      // 编辑弹窗-模板数据
      temp: {

      },
      // 编辑弹窗状态：create | update | info
      dialogStatus: '',
      // 显示编辑弹窗
      dialogFormVisible: false,
      // 编辑弹窗-标题
      textMap: {
        update: '编辑',
        create: '添加',
        info: '详情'
      },
      // 编辑弹窗-表单校验规则
      rules: {

      }
    }
  },
  computed: {
    showBtns() {
      return this.showUpdateBtn || this.showDeleteBtn || this.showInfoBtn
    },
    // 展示详情
    showInfo() {
      return this.dialogStatus === 'info'
    }
  },
  created() {
    // 默认加载查询一次表格数据
    this.getList()
  },
  methods: {
    // 处理搜索
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置模板数据
    resetTemp() {
      this.temp = {

      }
    },
    // 处理添加
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 添加数据
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createList(this.temp).then(() => {
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 处理编辑
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 修改数据
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateList(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 查看详情
    handleInfo(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'info'
      this.dialogFormVisible = true
    },
    // 处理删除
    handleDelete(row, index) {
      const parmas = { id: row.id }
      deleteList(parmas).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.list.splice(index, 1)
      })
    },
    // 获取表格数据
    getList() {
      this.listLoading = true
      fetchList(this.listQuery)
        .then((response) => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
        .catch((_) => {
          this.listLoading = false
        })
    }
  }
}
<\/script>

      `
    }
  }
}
</script>

<style scoped lang="scss">
.api-container {
  // width: 870px;
  margin: 0 auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  @media (max-width: 992px) {
    width: auto;
  }

  .block {
    h2 {
      padding-bottom: 20px;
    }

    h4 {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
